<include file="public@header" />
</head>
<body>
	<div class="wrap js-check-wrap">
		<div class="nav nav-tabs">
			<h4>数据统计</h4>
		</div>
		<form class="well form-inline margin-top-20" method="post" action="">
			时间:
			<input type="text" class="form-control js-bootstrap-date" name="start_time" id="start_time"
				   value="{$where_r.start_time|default=''}"
				   style="width: 140px;" autocomplete="off">-
			<input type="text" class="form-control js-bootstrap-date" name="end_time" id="end_time"
				   value="{$where_r.end_time|default=''}"
				   style="width: 140px;" autocomplete="off"> &nbsp; &nbsp;
			<input type="submit" class="btn btn-primary" value="筛选"/>
		</form>
	</div>
	<div>
		<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
	</div>
	<script src="__STATIC__/js/admin.js"></script>
	<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
	<script src="https://img.hcharts.cn/highcharts/modules/drilldown.js"></script>
	<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script>
    $(function () {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column',
                events: {
                    drilldown:function (e) {
                        if (!e.seriesOptions) {
							getdatatype(e.point.id,this,e);
                        }
					},
                    load: getdata // 图表加载完毕后执行的回调函数
                }
            },
            xAxis: {
                type: 'category'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.y}条',
                    }
                },
				series: {
					borderWidth: 0,
					dataLabels: {
						enabled: true,
						format: '{point.y}条'
					},
                    colorByPoint: true
				}
            },
            title: {
            },
            series: [{
                name: '总数据'
            }]
        });

        var data = {};
        function getdatatype(type,obj,e){
            if(data[type]) {
                setdrilldown(data[type],obj,e);
                return;
			}
            $.ajax({
                url:'{:url("getdatatoonecate")}',
				type:'post',
                data:{type:type,start_time:$('#start_time').val(),end_time:$('#end_time').val()},
                dataType:'json',
                async : false,
                success:function(data) {
                    data[type] = data;
                    setdrilldown(data,obj,e);
                }
            });
		}

		function setdrilldown(data,obj,e){
            var drilldowns = {};
            drilldowns[e.point.name] = {name:e.point.name};
            var datas = [];
            console.log(data);
            for(var i in data) {
                if(i == 'title') {
                    chart.setTitle({
                        text : data['data_title'] + ":" + data['title']['total'] + "条"
                    });
				}else{
                    if(data[i].lcount > 0) {
                        datas.push({
                            name:data[i].name,
                            y:data[i].lcount,
                        });
					}
				}
            }
            drilldowns[e.point.name].data = datas;

            series = drilldowns[e.point.name];
            // Show the loading label
//            console.log(obj.series.drilldownLevels())
            obj.addSeriesAsDrilldown(e.point, series);
		}

        function getdata(){
            $.ajax({
                url:'{:url("getdatatocate")}',
				data:{start_time:$('#start_time').val(),end_time:$('#end_time').val()},
                dataType:'json',
                type:'post',
                success:function(data) {
                        //具体的参数详见：https://api.hcharts.cn/highcharts#Series.addPoint
					for(var i in data) {
					    if(i == 'title') {
                            chart.setTitle({
								text : data[i].name + '数据:共' + data[i]['total'] + '条'
							});
						}else{
					        if(data[i].lcount == 0) {
					            continue;
							}
							if(data[i].cate) {
                                chart.series[0].addPoint({
                                    id : i,
                                    name:data[i].data_title,
                                    y:data[i].lcount,
                                    drilldown:true
                                }, true);
							}else{
                                chart.series[0].addPoint({
                                	id : i,
                                    name:data[i].data_title,
                                    y:data[i].lcount,
                                }, true);
							}
						}
					}
//                    console.log(data)
                }
            });
        }
    });
</script>
</body>
</html>